<template>
  <div class="qj">
    <h3>我是子组件</h3>
    <p>{{ id }}</p>
    <p>{{ pname }}</p>
    <p>{{ price }}</p>
    <p>{{ info }}</p>
    <button @click="$emit('cdata', id)">点击传向父组件</button>
  </div>
</template>

<script>
export default {
  // // 接收父组件传递过来的数据
  // //接收到的数据和data数据使用方法一样,但是不能修改
  // // props: ["uname", "age"],

  // //对象格式的props
  // //对象格式的有三个配置项可以用, required表示必填, type表示约束  default表示默认值
  // props: {
  //   uname: {
  //     required: true, //true 表示是必须要接受到uname这个值
  //     type: String, // 要求必须是字符串类型,数据类型不用加引号
  //   },
  //   age: Number, //可以这样直接要求格式

  //   sex: {
  //     default: "未知", //设置默认值,如果没有传递过来值,就执行这个
  //     type: [String, Number], //允许多种数据类型,写成数组格式
  //   },
  // },

  // :key="item.id"
  //   :id="item.id"
  //   :pname="item.pname"
  //   :price="item.price"
  //   :info="item.info"

  props: {
    id: {
      required: true, //id必须填写
    },
    pname: {
      default: "我是默认值",
    },
    price: Number,
    info: {
      default: "我是默认值",
      type: String, //属性必须为字符串类型
    },
  },
};
</script>

<style>
/* .qj {
  height: 100px;
  background-color: rgb(135, 135, 198);
} */
.qj {
  padding: 20px;
  margin: 10px;
  border: 3px solid #000;
  border-radius: 5px;
}
</style>